<template>
  <div>
    <div style="display: flex;flex-direction: row;">
        <div style="height: 80px;margin-top: 60px;margin-left: 15px;">
            <img style="width: 80px;height: 80px;" :src="avatarUrl1">
        </div>
        <div style=" margin-top:60px;margin-left: 30px;width: 170px;">
            <p style="width: 170px;font-size: 20px;">{{nickname1}}</p>
            <p style="width: 170px;font-size: 20px;margin-top: -15px;">{{telephone1}}</p>
        </div>
        <p @click="fanhuiShouye" style="font-size: 15px;">返回首页</p>
    </div>
    <div style="display: flex;flex-direction: row;margin-top: 50px;">
        <div style="width: 50px;margin-left: 30px;">
            <p  style="width: 50px;font-size: 15px; margin-left: 14px;">0</p>
            <p style="width: 170px;font-size: 15px;margin-top: -15px;">关注</p>
        </div>
        <div style="width: 50px;margin-left: 10px;">
            <p style="width: 50px;font-size: 15px;margin-left: 14px;">0</p>
            <p style="width: 170px;font-size: 15px;margin-top: -15px;">粉丝</p>
        </div>
        <div style="width: 50px;margin-left: 10px;">
            <p style="width: 50px;font-size: 15px;margin-left: 14px;">0</p>
            <p style="width: 170px;font-size: 15px;margin-top: -15px;">收藏</p>
        </div>
        <div style="margin-left: 50px;margin-top: 20px;">
            <el-button style="width: 100px;height: 40px;" type="primary" @click = "tuichu" round>退出登录</el-button>
        </div>
    </div>
  </div>
  <div style="margin-left: 20px;margin-top: 30px;">
    <p>作品展示</p>
  </div>
  <div style="display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 30px;">
        <div style="margin-left: -10px;margin-top: -20px;" v-for="a in tableData">
            <div style="width: 170px;height: 300px;margin-top: -5px;margin-left: 20px;">
                <p style="font-size: 10px;">{{a.title}}</p>
                <el-image style="width: 162px; height: 250px" :src="a.imgUrls" @click=detail(a.id) />
            </div>
        </div>
    </div>
   
    <RouterView />
  </template>
  
  <style scoped>
  
  </style>
  
  <script setup>
import { ref,onMounted} from 'vue';
import {ElMessage} from 'element-plus'
const nickname1 = ref(localStorage.getItem(	"nickname"))
const avatarUrl1 = ref(localStorage.getItem("avatarUrl"))
const telephone1 = ref(localStorage.getItem("telephone"))
const id1 =  ref(localStorage.getItem("id"))
import {useRouter } from 'vue-router';
const    router  = useRouter();
  const tuichu = ()=>{
    localStorage.clear()
    router.push({path:'/denglu'})
    ElMessage.success('退出成功')
  }
  const router2 = useRouter();
  const fanhuiShouye = () => {
  // 如果是内部路由跳转 (Vue Router)
  router2.push({path:'/'})
};

// 展示数据
const tableData =ref([])
const query = ()=>{
    fetch( `http://localhost:3000/users/${id1.value}?_embed=articles`,{
        method:'get'
    }).then(response=>response.json()).then((data)=>{
        tableData.value = data.articles
    })
}
onMounted(()=>{
    query()
})
const router1 = useRouter();
const detail = (id) => {
  // 如果是内部路由跳转 (Vue Router)
  router1.push({path:'/dengluchengongNeirong',query:{myid:id}})
};
  </script>